<template>
    <header class="header">
      <!-- 左侧部分 -->
      <div class="header-left">
        <a href="#" class="header-link">首页</a>
        <router-link to="/personal/personalData" class=" header-link  special-link">个人中心</router-link>
        <router-link to="/feedback" class=" header-link  special-link">反馈</router-link>
      </div>

      <!-- 中间部分 -->
      <div class="header-center">
        <!-- <input type="text" placeholder="查询..." class="header-search" /> -->
      </div>

      <!-- 右侧部分 -->
      <div class="header-right">
        <el-button type="primary" @click="Login" plain>登录</el-button>
        <el-avatar size="default" style="margin-left: 10px"> user </el-avatar>
      </div>
    </header>
  </template>

  <script>
  import router from "@/router/index.js";

  export default {
    name: "Header",
    methods:{
      Login(){
        router.push({
          path:'/login'
        })
      }
    }
  };
  </script>

  <style scoped>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
  }

  .header-left,
  .header-center,
  .header-right {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .header-left .header-link {
    margin-right: 15px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s, transform 0.3s;
  }



.header-link:hover,
.special-link:hover {
    padding: 8px 12px;
    border-radius: 5px;
    background-color: #d0e7ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

  .header-center .header-search {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .header-right .header-button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .header-right .header-button:hover {
    background-color: #0056b3;
  }
  </style>
